<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的订单</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>   
    <div id="app" class="findPage" style="height: 100%;">
        <div id="header" class="header-top" v-show="!loading">
            <div class="text-right" style="margin-right: .34rem;padding-top: .3rem;" @click="operaPopup(true)">
              <img src="../../../assets/img/search_icon.png" style="width: .4rem;height.4rem;">
            </div>
            <div class="find-title">
              <span class="big-title" :class="{'active':type==1}" @click="searchByType(1)">我约订单</span>
              <span class="big-title" :class="{'active':type==2}" @click="searchByType(2)">约我订单</span>
            </div>
        </div>
        <div>
            <mt-loadmore :top-method="loadTop" :autoFill="autoFill" @top-status-change="handleTopChange" v-if="orderList" class="list" :style="style" ref="loadmore" :maxDistance="maxDistance">
              <div slot="top" class="mint-loadmore-top">
                <span v-show="topStatus !== 'loading'"><img class="loading-gif" src="../../../assets/img/loading.gif"/></span>
                <span v-show="topStatus === 'loading'">刷新成功</span>
                </div>
                <div class="group" v-infinite-scroll="loadMore"  infinite-scroll-disabled="loadingMore" infinite-scroll-distance="10" infinite-scroll-immediate-check="true"> 
                    <div class="order-item" v-for="(item,index) in orderList" :key="index" @click.stop="enterDetail(item.id,item.status)">
                        <div class="item-header-top">
                            <div class="order-no" v-text="'订单编号：'+item.number"></div>
                            <div>
                              <span class="status1" v-if="item.status == 1">未支付</span>
                              <span class="status1" v-if="item.status == 2">待接单</span>
                              <span class="status1" v-if="item.status == 3">待服务</span>
                              <span class="status3" v-if="item.status == 4">服务中</span>
                              <!-- <span class="status3" v-if="item.status == 41">服务中</span> -->
                              <span class="status3" v-if="item.status == 5">已完成</span>
                              <span class="status2" v-if="item.status == 6">申诉中</span>
                              <span class="status1" v-if="item.status == 7">申诉成功</span>
                              <span class="status2" v-if="item.status == 8">申诉驳回</span>
                              <span class="status3" v-if="item.status == 9">已取消</span>
                              <span class="status3" v-if="item.status == 99">已完成</span>
                            </div>
                        </div>
                        <div style="margin-top:.3rem;padding-bottom: .34rem;border-bottom: .01rem solid #E5E5E5;margin-bottom: .3rem;">
                           <div>
                             <img  v-if="item.head" class="order_head" :src="item.head" @error="errorimg(index)">
                             <img  v-else class="order_head" src="../../../assets/img/default_head.png">
                           </div>
                           <div  style="width: 2.2rem;">
                            <p class="order_name" v-text="item.nickname"></p>
                            <p class="order_skill" v-text="item.service_title"></p>
                          </div>
                           <div style="width: 3.05rem;" class="text-right">
                              <p class="order_paragraph moreDot" style="text-align:right;">{{item.pay_time | time("MM-dd hh:mm",item.pay_time)}} {{item.nums}}{{item.units}}</p>
                              <p v-text="'￥'+item.price+'/'+item.units"></p>
                           </div>
                        </div>
                        <div class="order-footer">
                            <div class="order-time"><img src="../../../assets/img/time_icon.png" class="time_icon"/>{{item.pay_time | time("yyyy-MM-dd hh:mm",item.pay_time)}}</div>
                            <div><span class="order_money_title">实付</span><span class="order_money" v-text="'￥'+item.order_payment_price"></span></div>
                        </div>
                    </div>
                    <p v-show="loadingMore && !isAll" class="page-infinite-loading">
                      <mt-spinner type="fading-circle"></mt-spinner>
                    </p>
                    <p v-show="loadingMore && isAll" class="page-infinite-loading" style="font-size: .22rem;color:#8e94b7; width: 100%;">没有更多数据了</p>
                </div>
                <div v-if="orderList.length == 0">
                  <div class="flex" style="margin-top: 1rem;">
                        <img src="../../../assets/img/no-data-order.png" alt="点击屏幕，重新加载~" class="no-data"/>
                    </div>
                    <div class="default-text center">没有订单~</div>
                </div>
            </mt-loadmore>
            <mt-popup v-model="isSearch" position="bottom" style="background: rgba(0,0,0,0);">
              <div class="status_pupop center">
                 <div @click="searchByStatus(0)">全部</div>
                 <div @click="searchByStatus(1)">未完成</div>
                 <div @click="searchByStatus(2)">已结束</div>
              </div>
              <div class="status_cancel center" @click="operaPopup(false)">取消</div>
            </mt-popup>
            <div class="backTop" v-if="isBack" @click="backTop"></div>
        </div>
      </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
apiready = function() {

    var vm = new Vue({  
      data:{
        topStatus:'',
        autoFill:false,
        page:1,
        row:10,
        orderList:[{
          id:10000,
          title:'hahahha'
        }],
        loadingMore:false,
        isAll:false, //是否全部加载完
        status:0, // 1-未完成  2-已完成   0-全部
        type:1,   //1-我约的订单   2-约我的订单
        isSearch:false,
        loading:true,
        platform:'h5',
        isBack:false,
        t:'',
        maxDistance:100,
        style:{
          width:'7.5rem'
        }
      },
      components:{ Loadmore,Spinner,InfiniteScroll,Loading,Popup },
      mounted:function(){
          this.platform = common.platform;
          this.getMyOrder(1);
      },
      methods: {
          handleTopChange(status) {
            this.topStatus = status;
          },
          operaPopup:function(bool){
            this.isSearch = bool;
          },
          // 下拉刷新数据
          loadTop() {
              setTimeout(() => {
                this.page = 1;
                this.getMyOrder();
                this.$refs.loadmore.onTopLoaded();
                this.isBack = false;
              }, 500);
          },
          backTop(){
            $('.list').animate({scrollTop: '0px'}, 800);
            this.loadTop();
          },
          loadMore(){
              this.isBack = true;
              //显示加载中动画 
              this.loadingMore = true;
              this.page = this.page+1;
              setTimeout(() => {
                if(!this.isAll){
                  this.getMyOrder();
                }
              },100)
          },
          errorimg:function(index){
              this.orderList[index].head = require("assets/img/default_head.png");
          },
          searchByStatus:function(status){
            this.status = status;
            this.operaPopup(false);
            //重新查第一页
             this.page = 1;
             this.getMyOrder();
          },
          searchByType:function(type){
             //this.loadingMore = false;
             this.type = type;
             this.page = 1;
             this.getMyOrder();
             this.backTop();
          },
          //获取在线用户列表
          getMyOrder:function(num){
              common.ajax({
                  type:'GET',
                  url:'api/adder/order/quiz/'+this.type,
                  data:{
                     p:this.page,
                     row:this.row,
                     status:this.status
                  }
              }).then(res=>{
                 this.loading = false;
                 let respose = res.data;
                 if(this.page == 1 ){
                    this.orderList = respose;
                  }else{
                    this.orderList = [...this.orderList,...respose];
                  }
                  //隐藏动画
                  this.loadingMore = false;
                  if(respose.length < this.row){
                      this.isAll = true;
                  }else{
                    this.isAll = false;
                  }
                  if(num == 1 ){
                      var height = window.innerHeight;
                      var headerHeight = $("#header").height();
                       this.style = {
                         'width':'7.5rem',
                         'height':(height-headerHeight)+"px",
                         'padding-top':headerHeight+"px"
                       }
                  }
              })
          },
          enterDetail(id,status){
            location.href = "./../../views/myorderdetail/index.html?h5=true&orderId="+id;
          }
      }
    }); 
};
</script>

</html>
